@import 'variables';
@import 'mixins/media';

.modal {
  display: none;
  position: fixed;
  z-index: 1500;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;

  &.backdrop-color {
    background-color: rgba($trueBlack, 0.6);
  }

  &.open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: $space-x4;
    padding-top: $space-x4;
  }

  @include media-down-breakpoint(sm) {
    padding: $space;
  }
}

.modal-content {
  position: relative;
  z-index: 1100;
  background: $white;
  border-radius: $space-x4;
  box-shadow: $dropshadow-16;
  margin: auto;
  max-height: 100vh;
  height: auto;
  min-width: 288px;

  &.modal-content-admin {
    border-radius: $space-x1;
    border: $borderPrimary;
  }

  @include media-down-breakpoint(sm) {
    min-width: 100%;
    max-width: 100%;
  }

  @each $name, $size in $grid-breakpoints {
    @include media-up($size) {
      width: $size/1.8;
      padding: 0;

      &.xs {
        width: $size/3.5;
      }

      &.sm {
        width: $size/2.3;
      }

      &.lg {
        width: $size/1.5;
      }
    }
  }

  .modal-header {
    padding: $space-x4;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;

    &.modal-header-admin {
      font-weight: 700;
      border-bottom: $borderPrimary;
    }
  }

  .modal-body {
    font-size: 16px;
    line-height: 24px;
    color: $gray-900;
    padding-left: $space-x4;
    padding-right: $space-x4;
    max-height: 75vh;

    &.modal-body-admin {
      padding: $space-x6;
    }
  }

  .modal-footer {
    padding: $space-x4;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;

    &.modal-footer-admin {
      border-top: $borderPrimary;
      padding: $space-x3 $space-x4;
    }
  }
}
